<template >
  <el-dialog v-model="isShowDialog"
             :before-close="handleClose"
             :title="title"
             draggable
             width="80%"
             append-to-body
  >
    <div class="justify-content items-center" style="margin-bottom: 15px" >
      <div class="plan">
        <span class="information"></span>
        <span class="informationText">退货信息</span>
      </div>
    </div>
    <el-form :inline="true" ref="formRef" :model="saveParams" :disabled="isView" label-width="120px" :rules="rules">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="6">
          <el-form-item label="采购退货单号">
            <el-input v-model="saveParams.returnCode" @input="saveParams.returnCode=limitCharAndNumber(saveParams.returnCode)" placeholder="添加或自动生成" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="线下采购订单" prop="purchaseCode">
            <el-input  v-model="saveParams.purchaseCode" placeholder="请选择" disabled>
              <template #append>
                <el-button icon="Search" @click="handleAdd"/>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="所属仓库" prop="warehouseId">
            <el-select
                :disabled="saveParams.purchaseId"
                clearable
                v-model="saveParams.warehouseId"
                @change="changeWarehouse"
            >
              <template v-for="(item,index) in warehouseList" :key="index">
                <el-option :label="item.warehouseName" :value="item.warehouseId"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供应商名称">
            <el-input v-model="saveParams.vendorName" placeholder="供应商名称" clearable disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供应商编码">
            <el-input v-model="saveParams.vendorCode" placeholder="供应商编码" clearable disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收货人" prop="receiptByName">
            <el-input v-model="saveParams.receiptByName" placeholder="收货人" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式" prop="receiptPhone">
            <el-input v-model="saveParams.receiptPhone" @input="saveParams.receiptPhone=limitIntNumber(saveParams.receiptPhone)" :maxlength="11" placeholder="联系方式" clearable/>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="收货地址" prop="receiptAddress">
            <el-input v-model="saveParams.receiptAddress" placeholder="收货地址" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配送方式">
            <el-input v-model="saveParams.delivery" placeholder="配送方式" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" style="width: 96%">
            <el-input v-model="saveParams.remark" placeholder="备注" clearable/>
          </el-form-item>
        </el-col>
      </div>

    </el-form>

    <div class="justify-content items-center" style="margin-bottom: 15px" >
      <div class="plan">
        <span class="information"></span>
        <span class="informationText">商品信息</span>
      </div>
    </div>

    <vxe-table
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        height="300"
        :checkbox-config="{ trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="checkbox" ></vxe-column>
      <vxe-column type="seq" width="80" title="序号"  ></vxe-column>
      <vxe-column field="skuCode" width="200" title="商品编码"></vxe-column>
      <vxe-column field="skuName" title="商品名称"></vxe-column>
      <vxe-column field="coverUrl" width="180" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl" ></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="purchaseNum" title="采购数量"></vxe-column>
      <vxe-column field="purchasePrice" title="采购单价"></vxe-column>
      <vxe-column field="totalPurchaseMoney" title="采购总额"></vxe-column>
      <vxe-column field="returnNum" title="退货数量">
        <template #default="{row}">
          <el-input v-model="row.returnNum" :disabled="isView"
                    @input="row.returnNum=limitIntNumber(row.returnNum)" placeholder="退货数量" clearable/>

        </template>
      </vxe-column>
      <vxe-column field="brand" title="品牌"></vxe-column>
      <vxe-column field="条码" title="条码"></vxe-column>
    </vxe-table>

    <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" v-if="!isView" @click="clickSave"> 保存 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
    </template>
    <!--线下采购订单-->
    <B2bPurchaseAddGoods v-if="isShowAddGoods" :isShowAddGoods="isShowAddGoods" @cancel="closeAddGoods"></B2bPurchaseAddGoods>
  </el-dialog>
</template>

<script setup>
import B2bPurchaseAddGoods from "@/views/returnGoodsManage/b2bBurchaseReturn/compoent/b2bPurchaseAddGoods.vue";
import {getCurrentInstance, onMounted} from "vue";
import {getPurchaseDetailList, saveAndCommitB2BReturn} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {limitCharAndNumber, limitIntNumber} from "@/utils/shuangcheng";
import {getCompanySelect, getWarehouseSelect} from "@/api/system/user";

let saveParams = ref({})
// 表单校验
const rules = ref({
  purchaseCode: [{required: true, message: "请选择采购订单", trigger: "change"}],
  receiptByName: [{required: true, message: "收货人不能为空", trigger: "blur"}],
  receiptPhone: [{required: true, message: "联系方式不能为空", trigger: "blur"}],
  receiptAddress: [{required: true, message: "收货地址不能为空", trigger: "blur"}],

  warehouseId: [{required: true, message: "所属仓库不能为空", trigger: "change"}],
});
const {proxy} = getCurrentInstance();
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false
  },
  title:{
    type:String
  },
  isView:{type:Boolean},
  detailData: {type: Object},
})
const emits = defineEmits(['cancel'])
function handleClose() {
  emits('cancel')
}

let tableList=ref([])
let isShowAddGoods=ref(false)
function handleAdd(){
  if(  !saveParams.value.warehouseId  ){
    proxy.$modal.msgWarning("请先选择仓库!")
    return
  }
  isShowAddGoods.value=true
}

function clickSave(){
  proxy.$refs.formRef.validate((valid, fileds) => {
    if(valid){
      let header=saveParams.value
      let details=tableList.value
      let params={
        header:header,
        details:details
      }
      saveAndCommitB2BReturn(params).then(res=>{
        if(res.code===200){
          proxy.$modal.msgSuccess('保存成功')
          emits('cancel', true)
        }
      })
    }
  })
}

//关闭采购单可退货的弹框
function closeAddGoods(data){
  isShowAddGoods.value =false
  if(data){

    saveParams.value={...saveParams.value,...data}
    getPurchaseDetailList({purchaseId:data.purchaseId}).then(res=>{
      if(res.code===200){
        tableList.value =res.data
      }
    })
  }
}

onMounted(()=>{
  if(JSON.stringify(props.detailData) !='{}'){
    saveParams.value =props.detailData.header
    tableList.value =props.detailData.details
  }
  getWarehouse()

})

//获取仓库下拉数据
let warehouseList = ref([])
const sysUserInfo=JSON.parse(localStorage.getItem("userInfo"))
function getWarehouse(){
  getWarehouseSelect({'companyId':sysUserInfo.companyId}).then(res => {
    warehouseList.value = res.data
  })
}

function changeWarehouse(){
  tableList.value=[]
}

</script>

<style scoped lang="scss">

</style>